<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lib/easel.js"></script>
  <script src="../lib/preload.js"></script>
  <script src="../lib/tween.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background: rgb(32, 110, 32);
    }
    canvas{
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <canvas id="test" width="1000" height="800"></canvas>

  <script>
    let stage = new createjs.Stage('test');
    let queue = new createjs.LoadQueue(false, '../assets/');

    queue.loadManifest([{
      src: 'test/player_1.png',
      id: 'player'
    }]);

    queue.on('complete', () => {
      let player = queue.getResult('player');

      let playerSheet = new createjs.SpriteSheet({
        framerate: 10,
        images: [player],
        frames: [
          [0, 0, 33, 38, 0],
          [32, 0, 33, 38, 0],
          [64, 0, 33, 38, 0],
          [96, 0, 33, 38, 0],

          [0, 38, 33, 38, 0],
          [32, 38, 33, 38, 0],
          [64, 38, 33, 38, 0],
          [96, 38, 33, 38, 0],

          [0, 38 * 2, 33, 38, 0],
          [32, 38 * 2, 33, 38, 0],
          [64, 38 * 2, 33, 38, 0],
          [96, 38 * 2, 33, 38, 0],

          [0, 38 * 3, 33, 38, 0],
          [32, 38 * 3, 33, 38, 0],
          [64, 38 * 3, 33, 38, 0],
          [96, 38 * 3, 33, 38, 0],
        ],
        // frames: {
        //   width: 33,
        //   height: 38,
        //   regX: 0,
        //   regY: 0,
        //   spacing: 0,
        //   margin: 0
        // },
        animations: {
          stop: 0,
          bottom: [0, 3],
          top: [12, 15],
          right: [8, 11],
          left: [4, 7],
        },
      })

      let p = new createjs.Sprite(playerSheet, 'stop');
      // let p = new createjs.Bitmap(player);

      stage.addChild(p);

      let status = '';
      let moveX = 0;
      let moveY = 0;
      let moveArr = [];

      document.body.addEventListener('keydown', ev => {
        let code = ev.keyCode - 37;
        let s = '';
        if (code == 0) {
          s = 'left';
          moveX = -5;
        }
        if (code == 1) {
          s = 'top'
          moveY = -5;
        }
        if (code == 2) {
          s = 'right'
          moveX = 5;
        }
        if (code == 3) {
          s = 'bottom'
          moveY = 5;
        }
        if (!status) {
          status = s;
          p.gotoAndPlay(status);
        }
      })
      document.body.addEventListener('keyup', ev => {
        let code = ev.keyCode - 37;
        if(code == 0 || code == 2){
          moveX = 0;
        }
        if(code == 1 || code == 3){
          moveY = 0;
        }
        if(moveX == 0 && moveY == 0){
          p.gotoAndStop(status);
          status = ''
        }
      })

      createjs.Ticker.timingMode = createjs.Ticker.RAF;
      createjs.Ticker.addEventListener('tick', ev => {
        p.x += moveX;
        p.y += moveY;

        stage.update(ev);
      })
    })
  </script>
</body>

</html>